<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 个人信息 -->
      <el-card>
        <el-row>
          <el-col>
            <span v-if="this.$route.path==='/equip/addequip/'" style="font-size:16px;font-weight:600;">添加设备</span>
            <el-button class="btn" size="medium" type="primary" @click="backEquip">返回</el-button>
          </el-col>
        </el-row>
        <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="设备名称" prop="name">
            <el-input v-model="form.name" :disabled="isChecked" />
          </el-form-item>
          <el-form-item label="设备数量" prop="num">
            <el-input v-model="form.num" :disabled="isChecked" />
          </el-form-item>
          <el-form-item label="设备详情" prop="details">
            <el-input v-model="form.details" :disabled="isChecked" />
          </el-form-item>
          <el-form-item label="设备照片" prop="photoid">
            <UploadFile ref="uploadRef" :photo-list="photoList" :objtype="'obj'" :objid="form.name" :is-single="false" @changeFileList="changeFileList" />
          </el-form-item>
          <el-form-item v-if="!isChecked">
            <el-button type="primary" @click="onSubmit">提交</el-button>
            <el-button @click="backEquip">取消</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>
<script>
import { addEquip, getEquipDetail, editEquip } from '@/api/equip'

export default {
  data() {
    return {
      fileList: [],
      id: this.$route.query.id,
      photoList: [],
      hasUploadFiles: [],
      form: {
        name: '',
        num: '',
        photoid: '',
        details: ''
      },
      rules: {
        name: [
          { required: true, message: '名称不能为空', trigger: 'blur' },
          { min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur' }
        ],
        num: [
          { required: true, message: '数量', trigger: 'blur' },
          { min: 0, max: 9999, message: '长度在 0 到 9999 个字符', trigger: 'blur' }
        ],
        details: [
          { required: true, message: '详情不能为空', trigger: 'blur' },
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    isChecked() {
      const patharr = this.$route.path.split('/')
      return patharr[patharr.length - 1] === 'detail'
    }
  },
  created() {
    if (this.$route.path !== '/equip/addequip/') {
      this.getEquipDetail()
    }
  },
  methods: {
    onSubmit() {
      this.form.num = this.form.num.toString()
      if (this.photoList.length === 0 && this.$refs.uploadRef.getHasUploadFiles().length === 0) {
        this.$message.error('请上传设备的照片')
        return
      }
      this.$refs.formRef.validate(isOk => {
        if (isOk) {
          const msg = this.id ? '修改' : '添加'
          this.$confirm('确定' + msg + '设备吗').then(() => {
            this.$refs.uploadRef.saveImgAll().then((res) => {
              this.form.photoid = res[0].name
              if (this.id) {
                this.form.id = this.id
                return editEquip(this.form)
              } else {
                return addEquip(this.form)
              }
            }).then(() => {
              this.$message.success(msg + '成功')
              this.$router.push('/equip')
            })
          })
        }
      })
    },
    async getEquipDetail() {
      this.form = await getEquipDetail(this.id)
      this.$refs.uploadRef.getObjImg(this.form.name)
    },
    changeFileList(val) {
      this.photoList = val
    },
    backEquip() {
      this.$refs.formRef.resetFields()
      this.$router.push('/equip')
    }
  }
}
</script>
<style scoped>
.btn {
  display: flow;
  float: right;
  margin-bottom: 20px;
}
</style>
